<template>
    <!-- 封面, 这里的逻辑至于 -->
    <div class="cover">
        <img
            :src="currentSongCover"
            :class="{ playing: isPlaying }"
            height="100%"
        />
    </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { useStore } from "vuex";
import { getCoverUrl } from "@/utils/core";
const store = useStore();
const { username, sToken, salt } = store.getters.authFields;
// 是否在播放
const isPlaying = computed(() => store.getters["play/isPlaying"]);

// 封面地址, 如果currentPlayingSong为空, 返回默认头像
const currentSongCover = computed(() => {
    const currentSong = store.state.play.currentPlayingSong;
    if (currentSong && currentSong.id) {
        return getCoverUrl(username, sToken, salt, currentSong.id);
    } else {
        return "/img/logo.png";
    }
});
</script>
<style lang="less" scoped>
.cover {
    width: 100%;
    box-sizing: border-box;

    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: rotate 17s linear infinite;
        animation-play-state: paused;
    }

    img.playing {
        animation-play-state: running;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
